import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
// import IceCard from '@icedesign/card';
import { Dialog, Button, Grid,Radio, Checkbox,Moment,Pagination,Loading,Feedback, Form, Input, Field, Balloon, Tab } from '@icedesign/base';
import axios from 'axios';
import './SearchPage.scss';

const { Row, Col } = Grid;
const { Group: RadioGroup } = Radio;
const { Group: CheckboxGroup } = Checkbox;
const Toast = Feedback.toast;
const FormItem = Form.Item;

const timeArray = [{
    value: '今日',
    label: "今日"
  },{
    value: "24小时",
    label: "24小时"
  },{
    value: "2天",
    label: "2天"
  },{
    value: "3天",
    label: "3天"
  },{
    value: "7天",
    label: "7天"
  },{
    value: "10天",
    label: "10天"
  }];

  const articArray = [{
    value: 1,
    label: "相似度"
  },{
    value: 6,
    label: "时间降序"
  },{
    value: 5,
    label: "时间升序"
  },{
    value: 3,
    label: "相似文章"
  },{
    value: 4,
    label: "采集顺序"
  }];

const ResultArray = [{
    value: 1,
    label: "正常信息"
  },{
    value: 2,
    label: "精准信息"
  },{
    value: 3,
    label: "疑似垃圾"
  }];

const ShareBoolArray = [{
    value: 1,
    label: "显示"
  },{
    value: 2,
    label: "不显示"
  }];

const MatchingArray = [{
    value: 1,
    label: "按全文"
  },{
    value: 2,
    label: "按标题"
  },{
    value: 3,
    label: "按正文"
  }];

const SensitiveArray = [{
    value: 1,
    label: "全部"
  },{
    value: 2,
    label: "敏感"
  },{
    value: 3,
    label: "非敏感"
  }];

const SimilarArray = [{
    value: 2,
    label: "不合并"
  },{
    value: 1,
    label: "合并"
  }];

const InvolveArray = [{
  value: 2,
  label: "全部"
},{
    value: 0,
    label: "内容涉及"
  },{
    value: 1,
    label: "定位涉及"
  }];

const SourceArray = [{
    value: "全部",
    label: "全部"
  },{
    value: "省内",
    label: "省内"
  },{
    value: "省外",
    label: "省外"
  }];

export default class SearchPage extends Component {

  static displayName = 'SearchPage';

  constructor(props) {
    super(props);
    this.field = new Field(this);
    this.state = {
      searchData:[],
      SourceStyleArray:[],

      loadingVisible: false,
      iconLoading: false,
  
      timeIndexSelcet:'今日',
      articList:'时间降序',
      ResultIndex:'正常信息',
      ShareBoolIndex:'显示',
      MatchingIndex:'按全文',
      SensitiveIndex:'全部',
      SimilarIndex:'合并',
      InvolveIndex:'全部',
      SourceIndex:[],

      SelectSourceStyle:[],

      machineCode: this.GetUrlParam("machineCode"), //机器码
      startTime: Moment().format('YYYY-MM-DD 00:00:00'), //开始时间
      endTime: Moment().format('YYYY-MM-DD HH:mm:ss'), //结束时间
      page:1, //页数
      pageSize:10, //每页条数
      totalPage:0,
      orderBy:1, //文章排序
      sort:2, //排序类型
      options:1, //敏感属性
      resultShow:1, //结果呈现
      comblineflg:2, //相似文章
      showRootWb:1, //转发微博
      isLocationAddress:2, //涉及方式
      matchType:1, //匹配方式
      sny:'全部',
      provinces:null, //来源网站
      excludeProvinces:null, //排除定向省份
      origin:["1"],//来源类型

      customFlagShow:2,

      orderByNum:1,
      sortNum:2,

      allselect:false,

      contentShow:false,
      content:[],
      align: "cc cc",
      style:{
        width:"100%",
        height:"100%",
      },
      CTitle:'',
      CDesc:'',
      CDates:'',
      CWebpageUrl:'',
      CKeyword:'',
      COrigin:'',

      ControlShow:false,
      ControlContent:[],

      firstKey:null,
      secondeKey:null,
      keyMaxLength:481,
      PeyMaxLength:1000,

      ListdataSource:[],
    };

    // this.handleChildValueChange = this.handleChildValueChange.bind(this);
    this.onNormalChange = this.onNormalChange.bind(this);
    this.onArticChange = this.onArticChange.bind(this);
    this.onResultChange = this.onResultChange.bind(this);
    this.onShareBoolChange = this.onShareBoolChange.bind(this);
    this.onMatchingChange = this.onMatchingChange.bind(this);
    this.onSensitiveChange = this.onSensitiveChange.bind(this);
    this.onSimilarChange = this.onSimilarChange.bind(this);
    this.onInvolveChange = this.onInvolveChange.bind(this);
    this.onSourceChange = this.onSourceChange.bind(this);
    this.onSourceStyle = this.onSourceStyle.bind(this);
  }

  // componentWillMount(){
  //   this.panDuan()
  // }

  componentDidMount(){
    this.panDuan()
  }

  panDuan = () => {
    // console.log("origin",this.GetUrlParam("origin"));
    if(this.GetUrlParam("origin") == "3,4,5,6,7,8,9,10,11,12" && this.GetUrlParam("comblineflg") == "1"){
      // let c = this.props.location.state.origin.split(",");
      // console.log("热点新闻")
      this.setState({
        timeIndexSelcet:'24小时',
        startTime:Moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
        endTime:Moment().format('YYYY-MM-DD HH:mm:ss'),
        origin:this.GetUrlParam("origin").split(","),
        orderBy:3,
        comblineflg:1
      },()=>{
        this.getData(
          this.GetUrlParam("secu_code"),
          Moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
          Moment().format('YYYY-MM-DD HH:mm:ss'),
          this.state.page,
          this.state.pageSize,
          this.state.orderBy,
          this.state.sortNum,
          this.state.options,
          this.state.resultShow,
          this.state.comblineflg,
          this.state.showRootWb,
          this.state.isLocationAddress,
          this.state.matchType,
          null,
          null,
          this.GetUrlParam("origin").split(",")
        )
        console.log("请求热点新闻数据");
      })   
    }else if(this.GetUrlParam("origin") == "1" && this.GetUrlParam("comblineflg") == 1 && this.GetUrlParam("options") == 2){
      console.log("敏感信息")
      let c = this.GetUrlParam("origin").split(",");
      this.setState({
        timeIndexSelcet:'24小时',
        origin:["1"],
        options:Number(this.GetUrlParam("options")),
        startTime:Moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
        endTime:Moment().format('YYYY-MM-DD HH:mm:ss'),
        orderBy:3,
        comblineflg:1
      })

      this.getData(
        this.GetUrlParam("secu_code"),
        Moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
        Moment().format('YYYY-MM-DD HH:mm:ss'),
        this.state.page,
        this.state.pageSize,
        3,
        this.state.sortNum,
        Number(this.GetUrlParam("options")),
        this.state.resultShow,
        this.GetUrlParam("comblineflg"),
        this.state.showRootWb,
        this.state.isLocationAddress,
        this.state.matchType,
        null,
        null,
        this.GetUrlParam("origin").split(",").join(",")
      )
    }else if(this.GetUrlParam("origin")=="2" && this.GetUrlParam("comblineflg") == 1 && this.GetUrlParam("options") == 1 && this.GetUrlParam("orderBy") == 3){
      console.log("热点微博")
      let c = this.GetUrlParam("origin").split(",");
      this.setState({
        timeIndexSelcet:'24小时',
        origin:["2"],
        startTime:Moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
        endTime:Moment().format('YYYY-MM-DD HH:mm:ss'),
        options:Number(this.GetUrlParam("options")),
        orderBy:Number(this.GetUrlParam("orderBy")),
        comblineflg:Number(this.GetUrlParam("comblineflg"))
      })

      this.getData(
        this.GetUrlParam("secu_code"),
        Moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
        Moment().format('YYYY-MM-DD HH:mm:ss'),
        this.state.page,
        this.state.pageSize,
        Number(this.GetUrlParam("orderBy")),
        this.state.sortNum,
        Number(this.GetUrlParam("options")),
        this.state.resultShow,
        this.GetUrlParam("comblineflg"),
        this.state.showRootWb,
        this.state.isLocationAddress,
        this.state.matchType,
        null,
        null,
        2
      )
    }else{
      // console.log("ThisIsOne")
      this.getData(
        this.GetUrlParam("secu_code"),
        Moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
        Moment().format('YYYY-MM-DD HH:mm:ss'),
        this.state.page,
        this.state.pageSize,
        this.state.orderByNum,
        this.state.sortNum,
        this.state.options,
        this.state.resultShow,
        this.state.comblineflg,
        this.state.showRootWb,
        this.state.isLocationAddress,
        this.state.matchType,
        null,
        null,
        this.state.origin.join(",")
      )
    }
  }

  show = (content) => {
    Toast.show({
      type: "error",
      content: content,
      afterClose: () => console.log("")
    });
  };

  getData(machineCode,startTime,endTime,page,pageSize,orderBy,sort,options,resultShow,comblineflg,showRootWb,isLocationAddress,matchType,provinces,excludeProvinces,origin){
    this.setState({
      loadingVisible:true,
    })

    axios({
      url: `${global.constants.GOLDEYEGETHOST}cattle/opinion_origin_type`,
      method: 'get',
      params: {
        // secu_code:localStorage.getItem('machineCode'),
        secu_code:this.GetUrlParam("secu_code"),
        startTime:startTime.replace(/\+/g, "%2B"),
        endTime:endTime.replace(/\+/g, "%2B"),
        page:page,
        pageSize:pageSize,
        orderBy:orderBy,
        sort:sort,
        options:options,
        resultShow:resultShow,
        comblineflg:comblineflg,
        showRootWb:showRootWb,
        isLocationAddress:isLocationAddress,
        matchType:matchType,
        provinces:provinces,
        excludeProvinces:excludeProvinces,
        origin:origin,
      }
    }).then(response => {
      // console.log("来源类型",response.data.data.data_list)
      this.setState({
        allselect:true,
        SourceStyleArray:response.data.data.data_list,
      })
    }).catch(error => {
      console.log(error);
    });

    axios({
      url: `${global.constants.GOLDEYEGETHOST}cattle/opinion_list`,
      method: 'get',
      params: {
        secu_code:this.GetUrlParam("secu_code"),
        startTime:startTime.replace(/\+/g, "%2B"),
        endTime:endTime.replace(/\+/g, "%2B"),
        page:page,
        pageSize:pageSize,
        orderBy:orderBy,
        sort:sort,
        options:options,
        resultShow:resultShow,
        comblineflg:comblineflg,
        showRootWb:showRootWb,
        isLocationAddress:isLocationAddress,
        matchType:matchType,
        provinces:provinces,
        excludeProvinces:excludeProvinces,
        origin:origin,
      }
    }).then(response => {
      if(response.data.flag){
        // console.log("舆情数据",response.data.data.data_list)
        this.setState({
          ListdataSource:response.data.data.data_list,
          totalPage:response.data.data.totalCount,
          loadingVisible:false,
        })
        if(this.timeOut){
          clearTimeout(this.timeOut);
        }
        // localStorage.setItem("content",JSON.stringify(this.state.ListdataSource))
      }else{
        // this.setState({
        //   loadingVisible:false
        // })
        Toast.show({
          content:response.data.msg,
          afterClose: () => this.setState({
            loadingVisible:false
          })
        })
      }
      // localStorage.setItem('searchData',this.state.searchData)
      // console.log("新浪舆情数据",response.data)
    }).catch(error => {
      console.log(error);
    });
  }

  　GetUrlParam(paraName) {
    　　var url = document.location.toString();
    　　var arrObj = url.split("?");
    　　　　if (arrObj.length > 1) {
    　　　　　　var arrPara = arrObj[1].split("&");
    　　　　　　var arr;
    　　　　　　for (var i = 0; i < arrPara.length; i++) {
    　　　　　　　　arr = arrPara[i].split("=");
    　　　　　　　　if (arr != null && arr[0] == paraName) {
    　　　　　　　　　　return arr[1];
    　　　　　　　　}
    　　　　　　}
    　　　　　　return "";
    　　　　}
    　　　　else {
    　　　　　　return "";
    　　　　}
    　　}

  // 时间范围 事件
  onNormalChange(value) {
    // Moment.locale('zh-cn');
    if(value == '今日'){
      this.setState({
        timeIndexSelcet: value,
        startTime:Moment().format('YYYY-MM-DD 00:00:00'),
        endTime:Moment().format('YYYY-MM-DD HH:mm:ss'),
      })
      // console.log("今日起始时间",Moment().format('YYYY-MM-DD 00:00:00'),Moment().format('YYYY-MM-DD HH:mm:ss'))
    }else if(value == '24小时'){
      this.setState({
        timeIndexSelcet: value,
        startTime:Moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
        endTime:Moment().format('YYYY-MM-DD HH:mm:ss'),
      })
      // console.log("24小时前",Moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),Moment().format('YYYY-MM-DD HH:mm:ss'))

    }else if(value == '2天'){
      this.setState({
        timeIndexSelcet: value,
        startTime:Moment().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss'),
        endTime:Moment().format('YYYY-MM-DD HH:mm:ss'),
      })
      // console.log("2天前",Moment().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss'))

    }else if(value == '3天'){
      this.setState({
        timeIndexSelcet: value,
        startTime:Moment().subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss'),
        endTime:Moment().format('YYYY-MM-DD HH:mm:ss'),
      })
      // console.log("3天前",Moment().subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss'))

    }else if(value == '7天'){
      this.setState({
        timeIndexSelcet: value,
        startTime:Moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'),
        endTime:Moment().format('YYYY-MM-DD HH:mm:ss'),
      })
      // console.log("7天前",Moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'))

    }else if(value == '10天'){
      this.setState({
        timeIndexSelcet: value,
        startTime:Moment().subtract(10, 'days').format('YYYY-MM-DD HH:mm:ss'),
        endTime:Moment().format('YYYY-MM-DD HH:mm:ss'),
      })
      // console.log("10天前",Moment().subtract(10, 'days').format('YYYY-MM-DD HH:mm:ss'))

    }else{
      this.setState({
        timeIndexSelcet: value
      });
    }

    // console.log("时间范围",value);
  }

  // 文章排序 事件
  onArticChange(value) {
    if(value == 1){
      this.setState({
        orderBy:value,
        orderByNum:value,
        sortNum:2,
      });
    }else if(value == 2){
      this.setState({
        orderBy:value,
        orderByNum:value,
        sortNum:2,
      });
    }else if(value == 3){
      this.setState({
        orderBy:value,
        orderByNum:value,
        sortNum:2,
      });
    }else if(value == 4){
      this.setState({
        orderBy:value,
        orderByNum:value,
        sortNum:2,
      });
    }else if(value == 5){
      this.setState({
        orderBy:value,
        orderByNum:2,
        sortNum:1,
      });
    }else{
      this.setState({
        orderBy:value,
        orderByNum:2,
        sortNum:2,
      });
    }
    // console.log("文章排序",value);
  }

  // 结果呈现 事件
  onResultChange(value) {
    this.setState({
      resultShow: value,
      ResultIndex: value
    });
    // console.log("结果呈现",value);
  }

  // 转发微博 事件
  onShareBoolChange(value) {
    this.setState({
      showRootWb: value,
      ShareBoolIndex: value
    });
    // console.log("转发微博",value);
  }

  // 匹配方式 事件
  onMatchingChange(value) {
    this.setState({
      matchType: value,
      MatchingIndex: value
    });
    // console.log("匹配方式",value);
  }

  // 敏感属性 事件
  onSensitiveChange(value) {
    this.setState({
      options: value,
      SensitiveIndex: value
    });
    // console.log("敏感属性",value);
  }

  // 相似文章 事件
  onSimilarChange(value) {
    this.setState({
      comblineflg: value,
      SimilarIndex: value
    });
    // console.log("相似文章",value);
  }

  // 涉及方式 事件
  onInvolveChange(value) {
    this.setState({
      isLocationAddress: value,
      InvolveIndex: value
    });
    // console.log("涉及方式",value);
  }

  // 来源网站 事件
  onSourceChange(value) {
    // console.log("来源网站Value",value)

    if(value=="全部"){
      this.setState({
        sny:value,
        provinces: null,
        excludeProvinces:null
      });
      // console.log("来源网站-全部",this.state.provinces,this.state.excludeProvinces)

    }else if(value=="省内"){
      this.setState({
        sny:value,
        provinces:"北京",
        excludeProvinces:null
      });
      // console.log("来源网站-省内",this.state.provinces,this.state.excludeProvinces)

    }else if(value=="省外"){
      this.setState({
        sny:value,
        provinces:null,
        excludeProvinces:"北京"
      });
      // console.log("来源网站-省外",this.state.provinces,this.state.excludeProvinces)
    }
    
    // console.log("来源网站",value);
  }

  // 来源类型（多选） 事件
  onSourceStyle(selectedItems) {
    // console.log("数组",selectedItems)
    // console.log("数据类型",typeof(selectedItems))
    this.setState({
      origin:selectedItems
    })
    const allIndex = selectedItems.indexOf('1');
    // console.log("allIndex",selectedItems.length>1)

    if(allIndex == 0){
      selectedItems.splice(allIndex,1)
      this.setState({
        origin:selectedItems
      })
    }else if(allIndex == selectedItems.length - 1){
      selectedItems=["1"]
      this.setState({
        origin:selectedItems
      })
    }
  }

  // 查询
  GoSearch(){
    // let SearchURL =
    // '起始时间' + this.state.startTime 
    // + '/截止时间' + this.state.endTime
    // + '/文章排序' + this.state.orderByNum
    // + '/排序类型' + this.state.sortNum
    // + '/敏感属性' + this.state.options 
    // + '/结果呈现' + this.state.resultShow
    // + '/相似文章' + this.state.comblineflg 
    // + '/转发微博' + this.state.isLocationAddress
    // + '/匹配方式' + this.state.matchType
    // + '/来源网站' + this.state.provinces
    // + '/来源类型' + this.state.origin
    // console.log("搜索参数",SearchURL);
    this.setState({
      page:1
    })
    this.getData(
      this.GetUrlParam("secu_code"),
      this.state.startTime.replace(/\+/g, "%2B"),
      this.state.endTime.replace(/\+/g, "%2B"),
      1,
      this.state.pageSize,
      this.state.orderByNum,
      this.state.sortNum,
      this.state.options,
      this.state.resultShow,
      this.state.comblineflg,
      this.state.showRootWb,
      this.state.isLocationAddress,
      this.state.matchType,
      this.state.provinces,
      this.state.excludeProvinces,
      this.state.origin.join(",")
    )
  }

  handlePageSizeChange(size){
    this.setState({
      pageSize:size
    })
    this.getData(
      this.GetUrlParam("secu_code"),
      this.state.startTime.replace(/\+/g, "%2B"),
      this.state.endTime.replace(/\+/g, "%2B"),
      this.state.page,
      size,
      this.state.orderByNum,
      this.state.sortNum,
      this.state.options,
      this.state.resultShow,
      this.state.comblineflg,
      this.state.showRootWb,
      this.state.isLocationAddress,
      this.state.matchType,
      this.state.provinces,
      this.state.excludeProvinces,
      this.state.origin.join(",")
    )
  }

  handleChange(size){
    // console.log("handleChange",size)
    this.setState({
      page:size
    })
    // console.log("page",this.state.page)
    this.getData(
      this.GetUrlParam("secu_code"),
      this.state.startTime.replace(/\+/g, "%2B"),
      this.state.endTime.replace(/\+/g, "%2B"),
      size,
      this.state.pageSize,
      this.state.orderByNum,
      this.state.sortNum,
      this.state.options,
      this.state.resultShow,
      this.state.comblineflg,
      this.state.showRootWb,
      this.state.isLocationAddress,
      this.state.matchType,
      this.state.provinces,
      this.state.excludeProvinces,
      this.state.origin.join(",")
    )
  }

  ToastShow(msg){
    Toast.show({
      type: "loading",
      content: msg,
      // afterClose: () => console.log("Closed the toast")
    });
  }

  onOpen = (ids) => {
    axios({
      url: `${global.constants.GOLDEYEGETHOST}cattle/opinion_detail`,
      method: 'get',
      params: {
        secu_code:this.GetUrlParam("secu_code"),
        ids:ids
      }
    }).then(response => {
      // console.log("详情页内容",response.data.data)
      if(response.data.flag){
        this.setState({
          allselect:true,
          CTitle:response.data.data.title,
          CDesc:response.data.data.content,
          CDates:response.data.data.publishedMinute,
          CKeyword:response.data.data.keyword,
          COrigin:response.data.data.originTypeName,
          CWebpageUrl:response.data.data.webpageUrl
        })
        let c = []
        c.push(
          <div key={ids}>
            <p className="content-title" dangerouslySetInnerHTML={{__html:this.state.CTitle}}></p>
            <div className="dee-box">
              <span className="dee-st">{this.state.CDates}</span>
              <span className="dee-st">来自：{this.state.COrigin}</span>
              <span className="dee-st">涉及关键词：<span style={{color:'#cc0000'}}>{this.state.CKeyword}</span></span>
              <a href={this.state.CWebpageUrl} target="_blank"><span className="cky">查看原文</span></a>
            </div>
            <div className="content-desc">
              <p className="desc-lineHeight" dangerouslySetInnerHTML={{__html:this.state.CDesc}}></p>
            </div>
          </div>
        );
        this.setState({
          contentShow: true,
          content:c
        });
      }else{
        Toast.show({
          content:'详情页出错，请重试',
          afterClose: () => console.log("")
        })
      }
      
    }).catch(error => {
      console.log(error);
    });
    
  };

  onClose = () => {
    this.setState({
      contentShow: false,
      content:''
    });
  };

  ControlSubmit() {
    if(this.state.firstKey==null){
      Toast.show({
        content:'关键词不能为空',
        afterClose: () => console.log("")
      })
    }else{
      // console.log("收到表单值：", this.state.firstKey, this.state.secondeKey);
      axios({
        url: `${global.constants.GOLDEYEGETHOST}cattle/opinion_update_keyword`,
        method: 'get',
        params: {
          secu_code:this.GetUrlParam("secu_code"),
          keyword:this.state.firstKey,
          filterKeyword:this.state.secondeKey,
        }
      }).then(response => {
        // console.log("关键词修改",response.data)

      }).catch(error => {
        console.log(error);
      });
      this.GoSearch();
      this.onControlClose();
    }
  }

  onchangeInput(value){
    this.setState({
      firstKey:value
    })
    // console.log(value)
  }

  onchangePnput(value){
    // this.setState({
    //   Peyword:value.length,
    //   PP:this.state.PeyMaxLength - this.state.Peyword
    // })
    this.setState({
      secondeKey:value
    })
  }

  OpenKeyControl = () => {
    // let con = [],
    // con.push()
    this.setState({
      ControlShow:true
    })
  }

  onControlClose = () => {
    this.setState({
      ControlShow: false,
      // ControlContent:''
    });
  };

  GetUrlString(paraName) {
  　var url = document.location.toString();
    if(url.indexOf("&type=")==1){
      // console.log("/earlyWarning");
      return "/earlyWarning"
    }else{
      
    }
  }

  render() {
  
    const footer = (
      <a onClick={this.onClose} href="javascript:;">
      </a>
    );

    const formItemLayout = {
      labelCol: {
        fixedSpan: 10
      },
      wrapperCol: {
        span: 16
      }
    }

    return (
      <div className="search-page-page">
          <Dialog
            visible={this.state.contentShow}
            shouldUpdatePosition
            onClose={this.onClose}
            // minMargin={50}
            isFullScreen={true}
            style={this.state.style}
            align={this.state.align}
            footer={footer}
          >
            {this.state.content}
        </Dialog>

        <Dialog
            visible={this.state.ControlShow}
            shouldUpdatePosition
            onClose={this.onControlClose}
            minMargin={50}
            // style={this.state.style}
            align={this.state.align}
            footer={footer}
          >
            <div className="keyControl">
              <Form direction="ver" field={this.field}>
                <FormItem label="匹配关键词" {...formItemLayout}>
                  <Input multiple placeholder="(输入关键词)" maxLength={this.state.keyMaxLength} hasLimitHint onChange={this.onchangeInput.bind(this)} />
                  <div className="tab-box">
                    <Balloon trigger={<div className="tag" id="add">+</div>} triggerType="hover">
                      "+" 表示 "并且"
                    </Balloon>
                    <Balloon trigger={<div className="tag" id="bing">|</div>} triggerType="hover">
                      "|" 表示 "或"
                    </Balloon>
                    <div className="tag" id="leftkuo">(</div>
                    <div className="tag" id="rightkuo">)</div>
                    {/* <Balloon trigger={<div className="tag" id="leftkuo">(</div>} triggerType="hover">
                      "+" 表示 "并且"
                    </Balloon>
                    <Balloon trigger={<div className="tag" id="rightkuo">)</div>} triggerType="hover">
                      "|" 表示 "并且"
                    </Balloon> */}
                    <div className="tag-text"><span>(注意:匹配关键词请保持在</span><span>{this.state.keyMaxLength}</span>字之内)</div>
                  </div>
                </FormItem>

                <FormItem label="排除关键词" {...formItemLayout}>
                  <Input multiple placeholder="(输入关键词)" maxLength={this.state.PeyMaxLength} hasLimitHint onChange={this.onchangePnput.bind(this)} />
                  
                  <div className="tab-box">
                    <Balloon trigger={<div className="tag" id="add">+</div>} triggerType="hover">
                      "+" 表示 "并且"
                    </Balloon>
                    <Balloon trigger={<div className="tag" id="bing">|</div>} triggerType="hover">
                      "|" 表示 "或"
                    </Balloon>
                    <div className="tag" id="leftkuo">(</div>
                    <div className="tag" id="rightkuo">)</div>
                    {/* <Balloon trigger={<div className="tag" id="leftkuo">(</div>} triggerType="hover">
                      "+" 表示 "并且"
                    </Balloon>
                    <Balloon trigger={<div className="tag" id="rightkuo">)</div>} triggerType="hover">
                      "|" 表示 "并且"
                    </Balloon> */}
                    <div className="tag-text"><span>(注意:排除关键词只支持一层嵌套，排除关键词不超过</span><span>{this.state.PeyMaxLength}个字</span>个字。)</div>
                  </div>

                </FormItem>
                <FormItem label="" {...formItemLayout}>
                  <Button type="primary" onClick={this.ControlSubmit.bind(this)}>
                    确定
                  </Button>
                </FormItem>
              </Form>
              <div className="tool">*请注意：修改关键词后，由于系统处理耗时，您修改的关键词会在5~10分钟内生效。<br/>关键词生效后页面不会给予提醒，请您留心舆情页面数据的变化，谢谢！</div>
            </div>
        </Dialog>

        <IceContainer style={{width:'100%',borderRadius:'0'}}>
          {/* <div style={{display:'inline-flex',width:'100%',padding: '0 30px'}}>
            <Col s="24" xxs="24"><Button type="primary" className="key-btn" onClick={this.OpenKeyControl}>修改关键词</Button></Col>
          </div> */}
          <div style={{display:'inline-flex',width:'100%'}}>
            <Col s="12" xxs="24">
            {/* <FormBinderWrapper value={formValue} onChange={this.formChange}> */}
              <div>
                <Row style={styles.formRow}>
                  <Col span="4" style={styles.label}>
                    <span className="col-content-font">时间范围</span>
                  </Col>
                  <Col span="20">
                    <RadioGroup
                      dataSource={timeArray}
                      shape="button"
                      size="medium"
                      value={this.state.timeIndexSelcet}
                      onChange={this.onNormalChange}
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col span="4" style={styles.label}>
                    <span className="col-content-font">文章排序</span>
                  </Col>
                  <Col span="20">
                    <RadioGroup
                      dataSource={articArray}
                      shape="button"
                      size="medium"
                      value={this.state.orderBy}
                      // label={this.state.articList}
                      onChange={this.onArticChange}
                      className = "col-content-font"
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col span="4" style={styles.label}>
                    <span className="col-content-font">结果呈现</span>
                  </Col>
                  <Col span="20">
                    <RadioGroup
                      dataSource={ResultArray}
                      shape="button"
                      size="medium"
                      value={this.state.resultShow}
                      // label={this.state.resultShow}
                      onChange={this.onResultChange}
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col span="4" style={styles.label}>
                    <span className="col-content-font">转发微博</span>
                  </Col>
                  <Col span="20">
                    <RadioGroup
                      dataSource={ShareBoolArray}
                      shape="button"
                      size="medium"
                      value={this.state.showRootWb}
                      // label={this.state.showRootWb}
                      onChange={this.onShareBoolChange}
                    />
                  </Col>
                </Row>
              </div>
            {/* </FormBinderWrapper> */}
          </Col>
          <Col s="12" xxs="24">
          {/* <FormBinderWrapper value={formValue} onChange={this.formChange}> */}
              <div>
                <Row style={styles.formRow}>
                  <Col span="4" style={styles.label}>
                    <span className="col-content-font">敏感属性</span>
                  </Col>
                  <Col span="20">
                    <RadioGroup
                      dataSource={SensitiveArray}
                      shape="button"
                      size="medium"
                      value={this.state.options}
                      // label={this.state.options}
                      onChange={this.onSensitiveChange}
                      className = "col-content-font"
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col span="4" style={styles.label}>
                    <span className="col-content-font">相似文章</span>
                  </Col>
                  <Col span="20">
                    <RadioGroup
                      dataSource={SimilarArray}
                      shape="button"
                      size="medium"
                      value={this.state.comblineflg}
                      // label={this.state.comblineflg}
                      onChange={this.onSimilarChange}
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col span="4" style={styles.label}>
                    <span className="col-content-font">涉及方式</span>
                  </Col>
                  <Col span="20">
                    <RadioGroup
                      dataSource={InvolveArray}
                      shape="button"
                      size="medium"
                      value={this.state.isLocationAddress}
                      // label={this.state.isLocationAddress}
                      onChange={this.onInvolveChange}
                    />
                  </Col>
                </Row>
                <Row style={styles.formRow}>
                  <Col span="4" style={styles.label}>
                    <span className="col-content-font">匹配方式</span>
                  </Col>
                  <Col span="20">
                    <RadioGroup
                      dataSource={MatchingArray}
                      shape="button"
                      size="medium"
                      value={this.state.matchType}
                      // label={this.state.matchType}
                      onChange={this.onMatchingChange}
                    />
                  </Col>
                </Row>
                {/* <Row style={styles.formRow}>
                  <Col span="4" style={styles.label}>
                    <span className="col-content-font">来源网站</span>
                  </Col>
                  <Col span="20">
                    <RadioGroup
                      dataSource={SourceArray}
                      shape="button"
                      size="medium"
                      value={this.state.sny}
                      onChange={this.onSourceChange}
                    />
                  </Col>
                </Row> */}
              </div>
            {/* </FormBinderWrapper> */}
          </Col>
        </div>
        <div style={{ width:'100%',display:'block',padding:'0'}}>
          <Row style={styles.formRow}>
            <Col span="2" style={styles.label}>
              <span className="col-content-font lineSource">来源类型<br />(多选)</span>
            </Col>
            <Col span="22">
              <div style={{ lineHeight: '28px',marginLeft:'5px' }}>
              <CheckboxGroup dataSource={this.state.SourceStyleArray} onChange={this.onSourceStyle} value={this.state.origin} >
              { this.state.SourceStyleArray.map((item,i) => {
                return (
                  <Checkbox id={item.value} key={i} checked={this.state.allselect} value={item.value}>
                    <span className="next-checkbox-label">{item.name}({item.count})</span>
                  </Checkbox>
                  )
              })}
              </CheckboxGroup>
              </div>
            </Col>
          </Row>
        </div>
        <div style={{ width:'100%',display:'block',textAlign:'center',padding:'20px 0'}}>
          <Button type="primary" onClick={this.GoSearch.bind(this)} loading={this.state.loadingVisible} style={{ width:'120px',height:'40px',margin:'0 10px',borderRadius:'5px'}}>
            查询
          </Button>
          {/* <Button type="primary" onClick={this.OpenKeyControl} style={{ width:'120px',height:'40px',margin:'0 10px',borderRadius:'5px'}}>
            修改关键词
          </Button> */}
        </div>
        </IceContainer>

        <IceContainer className="article-list">
        <div>
          {/* <Loading visible={this.state.loadingVisible} shape="dot-circle"> */}
          <Loading style={{display: 'block'}} visible={this.state.loadingVisible} shape="fusion-reactor" color="#fff" tip="搜索中...">
            {/* {this.state.ListdataSource.map(this.renderItem)} */}
            {this.state.ListdataSource.map((data,idx,all) => {
              const isLast = all.length - 1 === idx;
              const wrapperStyle = { ...styles.item };
              const informationStyle = { ...styles.information };
              if (isLast) {
                delete wrapperStyle.borderBottom;
                wrapperStyle.marginBottom = '0px';
                informationStyle.marginBottom = '0px';
              }

              return(
                <div key={idx} className="content" onClick={this.onOpen.bind(this,data.id)}>
                  <div style={wrapperStyle}>
                    <div style={styles.title}>
                      <span style={styles.titleTag}>【{data.originTypeName}】</span>
                      <span className="title-xz" dangerouslySetInnerHTML={{__html:data.title}}></span>
                      <span className={data.sensitive=='非敏感'?"sm-flag":"sm-flagF"}>{data.sensitive}</span>
                    </div>
                    <div style={styles.desc}><span dangerouslySetInnerHTML={{__html:data.summary}}></span></div>
                    <div style={styles.buttonDiv}>
                      <div style={styles.mgWrods}>
                        <span>涉及词:</span><span style={{color:'#cc0000'}}>{data.keyword}</span>
                      </div>
                      <div style={styles.datetime}>
                        <span>{data.publishedMinute}</span><span style={{marginLeft:'10px'}}>{data.captureWebsiteName}</span>
                      </div>
                    </div>
                  </div>
                </div>
                )
              }
            )}
          </Loading>
          <Pagination
            shape = "arrow-only"
            pageSizeSelector="filter"
            current= {this.state.page}
            defaultCurrent = {1}
            pageSize = {this.state.pageSize}
            total = {this.state.totalPage}
            onChange={this.handleChange.bind(this)}
            onPageSizeChange={this.handlePageSizeChange.bind(this)}
          />
        </div>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  formRow: {
    fontSize:'14px',
    marginTop:'10px',
    paddingBottom: '8px',
    borderBottom: '1px solid #f1f1f1',
  },
  label: { lineHeight: '28px', paddingRight: '10px', width:'80px' },
  item: {
    borderBottom: '1px solid #F4F4F4',
    padding:'20px 20px 40px',
    marginBottom: '15px',
  },
  title: {
    display:'inline-flex',
    color: '#0d308c',
    fontSize: '16px',
    marginBottom: '15px',
    position: 'relative'
  },
  buttonDiv:{
    padding:'0 10px'
  },
  mgWrods:{
    float:'left',
    fontSize: '12px',
  },
  datetime: {
    // position: 'absolute',
    float: 'right',
    fontSize: '12px',
    color: '#9B9B9B',
  },
  desc: {
    color: '#999',
    fontSize: '13px',
    lineHeight: '24px',
    paddingLeft:'10px',
    paddingBottom: '15px',
  },
  information: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: '15px',
  },
  button: {
    marginRight: '10px',
  },
  operator: {
    paddingTop: '8px',
    fontSize: '12px',
    color: '#9B9B9B',
  },
  operatorItem: {
    marginRight: '5px',
  },
  titleTag:{
    color:'#333',
  },
  iceEllipsis:{
    width:'90%'
  }
};



  // renderItem = (data, idx, all,index) => {
  //   const isLast = all.length - 1 === idx;
  //   const wrapperStyle = { ...styles.item };
  //   const informationStyle = { ...styles.information };
  //   if (isLast) {
  //     delete wrapperStyle.borderBottom;
  //     wrapperStyle.marginBottom = '0px';
  //     informationStyle.marginBottom = '0px';
  //   }
  //   return (
  //   // <Link key={idx} to={{pathname:"/ContentPage",  query:{ids:data.id}, state:{id:data.id, history:document.location.toString()}}}>
  //     <div key={index} className="content" onClick={this.onOpen}>
  //       <div style={wrapperStyle}>
  //         <div style={styles.title}>
  //           <span style={styles.titleTag}>【{data.originTypeName}】</span><span dangerouslySetInnerHTML={{__html:data.title}}></span>
  //           <span className={data.sensitive=='非敏感'?"sm-flag":"sm-flagF"}>{data.sensitive}</span>
  //         </div>
  //         <div style={styles.desc}><span dangerouslySetInnerHTML={{__html:data.summary}}></span></div>
  //         <div style={styles.buttonDiv}>
  //           <div style={styles.mgWrods}>
  //             <span>涉及词:</span><span style={{color:'#cc0000'}}>{data.keyword}</span>
  //           </div>
  //           <div style={styles.datetime}>
  //             <span>{data.publishedMinute}</span><span style={{marginLeft:'10px'}}>{data.captureWebsiteName}</span>
  //           </div>
  //         </div>
  //       </div>
  //     </div>
  //   // </Link>
  //   );
  // };